<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_节流_underscore</title>

  <!-- <script src="./underscore.js"></script> -->
  <!-- <script src="./99_封装throttle-时间戳版.js"></script> -->
  <!-- <script src="./99_封装throttle-定时器版.js"></script> -->
  <!-- <script src="./99_封装throttle-时间戳定时器结合版.js"></script> -->
  <script src="./99_封装throttle.js"></script>
</head>

<body>

  <!-- 
    节流:
    原理: 如果你持续触发事件, 每隔一段时间, 只执行一次事件
    应用场景:
      1. DOM元素的拖拽功能实现
      2. 射击游戏
      3. 计算鼠标移动的距离
      4. 监听scroll滚动事件
  -->


  <div>
    <h1>我是计算器: <span class="span">0</span></h1>
    <button class="btn">点击我加 1</button>
  </div>


  <script>
    // 第一次触发 最后一次不会触发执行
    // 顾头 不顾尾
    // leading: true, trailing: false,
    // function throttle(callback, wait) {
    //   let args;
    //   // 之前的时间戳
    //   let old = 0;
    //   return function() {
    //     args = arguments;
    //     // 获取当前的时间戳
    //     let now = new Date().valueOf();
    //     console.log('之前的:', old);
    //     console.log('现在的:', now);
    //     console.log(now-old);
    //     if (now-old > wait) {
    //       // 立即执行
    //       callback.apply(this, args)
    //       old = now;
    //     }
    //   }
    // }


    // 第一次不触发 最后一次触发
    // 顾尾 不顾头
    // leading: false, trailing: true
    // function throttle(callback, wait) {
    //   let args, timeout;
    //   return function() {
    //     args = arguments;
    //     if (!timeout) {
    //       timeout = setTimeout( () => {
    //         callback.apply(this, args);
    //         clearTimeout(timeout);
    //         timeout = null;
    //       }, wait)
    //     }
    //   }
    // }



    // 有头有尾
    // 第一次直接执行, 最后一次还会再执行
    // leading: true, trailing: true
    // function throttle(callback, wait) {
    //   let that, args, timeout;
    //   let old = 0;  // 时间戳
    //   let later = function() {
    //     callback.apply(that, args);
    //     // 每次执行后, 重置old
    //     old = new Date().getTime();
    //     clearTimeout(timeout);
    //     timeout = null;
    //   };
    //   return function () {
    //     args = arguments
    //     that = this;
    //     let now = Date.now();
    //     if (now - old > wait) {
    //       // 判断顾尾
    //       if (timeout) {
    //         clearTimeout(timeout);
    //         timeout = null;
    //       }
    //       callback.apply(that, args);
    //       old = now;
    //     } else if (!timeout) {
    //       timeout = setTimeout(later, wait)
    //     }
    //   }
    // }



    // 顾头又顾尾
    // function throttle(callback, wait, options) {
    //   let that, args, timeout, result;
    //   let old = 0;  // 时间戳
    //   if (!options) options = {};
    //   let later = function() {
    //     callback.apply(that, args);
    //     old = new Date().getTime();
    //     clearTimeout(timeout);
    //     timeout = null;
    //   };
    //   const throttled = function () {
    //     args = arguments
    //     that = this;
    //     let now = Date.now();
    //     if (options.leading === false && !old) {
    //       old = now;
    //     }
    //     if (now - old > wait) {
    //       if (timeout) {
    //         clearTimeout(timeout);
    //         timeout = null;
    //       }
    //       result = callback.apply(that, args);
    //       old = now;
    //     } else if (!timeout && options.trailing !== false ) {
    //       timeout = setTimeout(later, wait)
    //     }
    //     return result
    //   }
    //   throttled.cancel = function() {
    //     clearTimeout(timeout);
    //     timeout = that = args = null;
    //   }
    //   return throttled;
    // };





    const Span = document.querySelector('.span');
    const Btn = document.querySelector('.btn');
    let count = 0;

    function request(e) {
      count++;
      Span.innerText = count;
      console.log(this);
      console.log(e);
      return '结果想输出点什么'
    }

    const doSomeThing = throttle(request, 1000, {
      // leading: true,
      // trailing: false
    })
    // console.log( doSomeThing());
    Btn.onclick = doSomeThing;




    // 顾头又顾尾
    // 第一次会执行, 最后一次不会执行 leading: true, trailing: false
    // 第一次不会执行, 最后一次会执行 leading: false, trailing: true
    // 第一次会执行, 最后一次还会执行 leading: true, trailing: true
    // Btn.onclick = _.throttle(request, 1000, {
    //   leading: true,
    //   trailing: true
    // })


  </script>
</body>

</html>